<template>
  <div class="cen">
    <!-- 外层 grid 容器 -->
    <draggable
      :list="state"
      item-key="id"
      :style="gridStyle"
      class="grid-container"
      animation="300"
      @end="handleDragEnd"
    >
      <template #item="{ element }">
        <div
          class="square-card"
          :style="cellStyle(element)"
          @contextmenu.stop="handleRightClick($event, element)"
        >
          <!-- 图标 -->
          <div
            @click="jump(element)"
            class="square"
            :style="innerStyle(element)"
          >
            <img
              class="img"
              :src="element.src"
              width="100%"
              v-if="!element.iconname"
            />
            <div
              v-else
              class="icon-background"
              :style="{ backgroundColor: element.backgroundColor }"
            >
              <div class="icon-text">{{ element.iconname }}</div>
            </div>
          </div>
          <div class="name" :style="{ color: fontcolor.value }">
            {{ element.name }}
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
/* eslint-disable */
import { computed, defineProps, inject, defineEmits } from "vue";
import { useStore } from "vuex";
import draggable from "vuedraggable";

const emit = defineEmits(["remove"]);

const store = useStore();
const props = defineProps({ id: String, data: Array });

/* 基础尺寸 / 间距 / 圆角 */
const SquareSize = computed(() => store.getters["getsquareSize"]);
const BoxGap = computed(() => store.getters["getboxgap"]);
const radius = computed(() => store.getters["getradius"]);
const fontcolor = computed(() => store.getters["getfontcolor"]);

/* 数据列表 */
const showaddurl = computed(() => store.getters["getshowaddurl"]);
const state = computed(() =>
  showaddurl.value
    ? [
        ...props.data,
        {
          name: "新增网址",
          url: "",
          add: true,
          src: chrome.runtime.getURL("assets/icon/yandex.svg"),
          size: "1x1",
        },
      ]
    : props.data
);

const gridStyle = computed(() => ({
  display: "grid",
  gap: `${BoxGap.value}px`,
  gridTemplateColumns: `repeat(auto-fill, minmax(${SquareSize.value}px, 1fr))`,
  gridAutoRows: `${SquareSize.value}px`,
  gridAutoFlow: "dense",
  width: "100%",
  height: "100%",
}));

function cellStyle(el) {
  const [w, h] = (el.size || "1x1").split("x").map(Number);
  return {
    gridColumnEnd: `span ${w}`,
    gridRowEnd: `span ${h}`,
  };
}

function innerStyle(el) {
  const [w, h] = (el.size || "1x1").split("x").map(Number);
  return {
    gridColumnEnd: `span ${w}`,
    gridRowEnd: `span ${h}`,
    width: `${w * SquareSize.value + (w - 1) * BoxGap.value}px`,
    height: `${h * SquareSize.value + (h - 1) * BoxGap.value}px`,
    borderRadius: `${radius.value}px`,
  };
}

/* 其余逻辑保持不变 */
const showContextMenu = inject("showContextMenu");
const menuItems = [
  { label: "编辑", action: () => {} },
  {
    label: "删除",
    action: (data) => {
      emit("remove", data);
    },
  },
  {
    label: "布局",
    Children: ["1x1", "1x2", "2x1", "2x2", "2x4"],
    action: (data) => {
      console.log("w", data.id);
    },
  },
];
function handleRightClick(e, data) {
  e.preventDefault();
  showContextMenu(e, menuItems, data);
}
const newtab = computed(() => store.getters["getnewtab"]);
function jump(el) {
  newtab.value ? window.open(el.url, "_blank") : (location.href = el.url);
}
function handleDragEnd(evt) {
  console.log("拖动前", evt.oldIndex, "→ 拖动后", evt.newIndex);
}
</script>

<style scoped>
.cen {
  width: 100%;
  height: 100%;
}

.grid-container {
  padding: 20px 10px;
}

.square-card {
  position: relative;
}

.square {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(48, 48, 48, 0.9);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
}
.square:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.9);
}

.square .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.icon-background {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-text {
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
  font-weight: bold;
  word-wrap: break-word;
  padding: 5px;
}
.name {
  line-height: 30px;
  text-align: center;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}
</style>
